<template>
    <div class="cropper-app">
        <el-form :model="formValidate" :rules="ruleValidate" ref="formValidate" label-width="100px" class="demo-ruleForm">
            <el-form-item label="图片上传" prop="mainImage">
                <div class="list-img-box">
                    <div class="list-img-box-img" v-if="formValidate.mainImage !== ''">
                        <img :src="formValidate.mainImage" alt="自定义图面">
                    </div>
                    <div v-else class="upload-btn" @click="uploadPicture('flagImg')">
                        <i class="el-icon-plus" style="font-size: 30px;"></i>
                    </div>
                </div>
                <input class="cropper-app-btn" type="hidden" v-model="formValidate.mainImage" placeholder="请添加封面">
            </el-form-item>
        </el-form>
        <!-- 剪裁组件弹窗 -->
        <el-dialog
            :width="assembly.pictureCuttingWidth"
            class="shadow-mask"
            title="裁切图片"
            :visible.sync="cropperModel"
            center>
            <cropper
                class="trim-pictures"
                :Name="cropperName"
                @uploadImgSuccess = "handleUploadSuccess"
                ref="child">
            </cropper>
        </el-dialog>
        <!--查看大封面-->
        <el-dialog
            title="查看大封面"
            :visible.sync="imgVisible"
            center>
            <img :src="imgName" v-if="imgVisible" style="width: 100%" alt="查看">
        </el-dialog>
    </div>
</template>

<script>
import cropper from '@/components/slot/PictureCutting'
import {mapState,mapMutations} from 'vuex'
export default {
    name: "Assembly",
    components:{
        cropper
    },
    computed:{
        ...mapState('Public',['assembly'])
    },
    // created() {
    //   console.log(this.assembly.pictureCuttingWidth)
    // },
    data () 
    {
        return {
            formValidate: {
                mainImage: '',
            },
            ruleValidate: {
                mainImage: [
                    {
                        required: true, 
                        message: '请上传封面', 
                        trigger: 'blur'
                    }
                ],
            },
            //裁切图片参数
            cropperModel:false,
            cropperName:'',
            imgName: '',
            imgVisible: false,
            // watch:'40%',
        }
    },
    methods: {
        //封面设置
        uploadPicture(name)
        {
            this.cropperName = name;
            this.cropperModel = true;
        },
        //图片上传成功后
        handleUploadSuccess (data)
        {
            console.log(data)
            switch(data.name)
            {
                case 'flagImg':
                this.formValidate.mainImage = 'http://ydfblog.cn/dfs/'+data.url;
                console.log('最终输出'+data.name)
                break;
            }
            this.cropperModel = false;
        },
        //屏幕伸缩改变后
        ...mapMutations('Public',['EidtpublicWidth'])
    }
}
</script>

<style scoped lang="less">
    .upload-list-cover
    {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 40px;
        align-items: center;
        background: rgba(0,0,0,.6);
        opacity: 0;
        transition: opacity 1s;
    }
    .cover_icon 
    {
        font-size: 30px;
    }
    .upload-btn
    {
        width: 150px;
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px dashed #cccccc;
        border-radius: 8px;
    }
    .upload-btn:hover 
    {
        border: 1px dashed #69b7ed;
    }
    .upload-btn i
    {
        margin: 5px;
    }
    .cropper-app
    {
        width: 300px;
        height: 300px;
        .el-form
        {
            .list-img-box
            {
                width: 200px;
                height: 200px;
            }
        }
    }

</style>

